<template>
  <div class="loadmore" :style="{ height: $store.state.screenH + 'px' }">
    <mt-loadmore ref="loadmore" :top-method="refrash" :topDistance="30">
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <li v-for="(el, index) in arr" :key="index">
          {{ el }}
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>
<script>
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      list1: [100, 111, 222, 33, 444, 55, 666],
      loading: false,
    };
  },
  mounted() {},
  methods: {
    refrash() {
      setTimeout(() => {
        this.arr = [...this.list];
        this.$refs.loadmore.onTopLoaded();
        this.loading = false;
      }, 3000);
    },
    loadMore() {
      this.loading = true;
      Indicator.open("加载中...");
      setTimeout(() => {
        this.arr = [...this.list, ...this.list1];
        this.loading = true;
        Indicator.close();
      }, 5500);
    },
  },
};
</script>
<style lang="less" scoped>
div.loadmore {
  ul {
    margin: 0;
    padding: 0;
    text-align: center;
    li {
      line-height: 60px;
    }
  }
}
</style>